<template>
  <BasicModal
    @register="register"
    title="选择产品"
    width="1000px"
    :destroyOnClose="true"
    :canFullscreen="false"
    wrapClassName="SelectProductLibrary"
    :okText="`确定选择(${selectList.length})`"
    @ok="handleOk"
  >
    <ProductLibrary pageType="modal" :groupId="groupId" @selectionChange="selectionChange" />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import ProductLibrary from '../productLibrary/index.vue';
  import { IProductManage } from '@/api/hby/productManage/type';
  import { ref, unref } from 'vue';

  const emit = defineEmits(['register', 'ok']);
  const groupId = ref<number>();

  const [register, { closeModal }] = useModalInner((data)=> {
    groupId.value = data.id;
  });

  const selectList = ref<IProductManage[]>([]);
  function selectionChange(rows) {
    selectList.value = rows ?? [];
  }

  function handleOk() {
    emit('ok', {
      rows: unref(selectList),
      groupId: unref(groupId)
    });
    closeModal();
  }
</script>
<style lang="less">
  .SelectProductLibrary {
    .ant-modal .ant-modal-body {
      .scrollbar {
        padding: 0;
      }
      .scroll-container .scrollbar__wrap {
        margin-bottom: 0 !important;
      }
    }
  }
</style>
